<template>
  <div class="overview-chart-wrapper">
    <div class="chart-wrapper">
      <div class="contract-chart-wrapper">
        <div style="display:flex; align-items: center;">
          <div class="bag-6a66f6-radius-2px" style="width: 4px; height: 16px; margin-right: 12px"></div>
          <div class="chart-title">电子合同签约数</div>
        </div>
        <div>
          <a-month-picker v-model="dateStart" placeholder="请选择月份" :disabled="true" style="margin-right: 12px;" />
          <a-month-picker v-model="dateEnd" @change="dateEndChange" placeholder :allow-clear="false" :disabled-date="handleDisabled" />
        </div>
      </div>
      <div id="contract" class="chart-basic" />
    </div>
    <div class="chart-wrapper">
      <div>
        <div style="display:flex; align-items: center;">
          <div class="bag-6a66f6-radius-2px" style="width: 4px; height: 16px; margin-right: 12px"></div>
          <div class="chart-title">在职员工学历占比</div>
        </div>

        <div id="education" class="chart-basic" />
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import moment from "moment";
import { getStatisticsEmpInfoContractConut, empEduCount } from "@/api/overview/staff";
export default {
  props: ["siteId"],
  data() {
    return {
      dateStart: null,
      dateEnd: null,
      xAxis: [],
      series: []
    };
  },

  watch: {
    // dateEnd: {
    //   handler(val) {
    //     this.dateStart = moment(val).subtract(5, "months");
    //     this.initContract();
    //   },
    //   deep: true
    // },
    siteId(newValue) {
      this.initContract();
      this.initEducation();
    }
  },
  created() {
    this.dateEnd = moment();
    this.dateStart = moment().subtract(5, "months");
  },
  mounted() {
    this.initContract();
    this.initEducation();
  },
  methods: {
    dateEndChange() {
      this.dateStart = moment(this.dateEnd).subtract(5, "months");
      this.initContract();
    },
    moment,
    initContract() {
      const contractChart = echarts.init(document.getElementById("contract"));
      const data = {
        dateStart: moment(this.dateStart).format("YYYY-MM-DD"),
        dateEnd: moment(this.dateEnd).format("YYYY-MM-DD")
      };
      data.dateStart = data.dateStart.substring(0, 8) + "01";
      data.dateEnd = data.dateEnd.substring(0, 8) + "01";
      if (this.siteId && this.siteId !== "undefined") {
        data.companyIds = this.siteId;
      }
      getStatisticsEmpInfoContractConut(data)
        .then(res => {
          this.xAxis = [];
          this.series = [];
          const temp = JSON.parse(JSON.stringify(res.data));
          temp.forEach((item, index) => {
            this.xAxis[index] = item.time;
            this.series[index] = parseInt(item.count);
          });
          contractChart.setOption({
            color: localStorage.getItem("primary"),
            tooltip: {},
            legend: {
              data: []
            },
            xAxis: {
              data: this.xAxis,
              max: "30"
            },
            yAxis: {},
            series: [
              {
                name: "",
                type: "bar",
                barMaxWidth: "30",
                data: this.series
              }
            ],
            label: {
              distance: 6,
              offset: [0, 2],
              show: true,
              position: "top"
            }
          });
          setTimeout(() => {
            window.onresize = () => {
              contractChart.resize();
            };
          }, 200);
        })
        .catch(err => {
          console.log("debug log --> ", err);
        });
    },
    initEducation() {
      const educationChart = echarts.init(document.getElementById("education"));
      const data1 = {};
      if (this.siteId && this.siteId !== "undefined") {
        data1.companyIds = this.siteId;
      }
      empEduCount(data1)
        .then(({ data }) => {
          const option = {
            color: [
              "#FF7F50",
              "#9C64D1",
              "#8CD579",
              "#6475FF",
              "#FCCF5E",
              "#44D7B6",
              "#2294FF",
              "#FA5051",
              "#354785",
              localStorage.getItem("primary")
            ],
            title: {
              textalign: "center",
              text: data.empCount,
              subtext: "员工数",
              left: "center",
              top: "center",
              // x: "58%",
              // y: "45%",
              textStyle: {
                fontSize: 38,
                color: "#454c5c"
              },
              subtextStyle: {
                fontSize: 12,
                color: "#6c7a89",
                fontWeight: 500
              }
            },
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            series: [
              {
                name: "访问来源",
                type: "pie",
                radius: ["50%", "70%"],
                avoidLabelOverlap: false,
                label: {
                  show: false,
                  position: "center"
                },
                emphasis: {
                  label: {
                    show: false,
                    fontSize: "30",
                    fontWeight: "bold"
                  }
                },
                labelLine: {
                  show: false
                },
                data: [
                  { value: data.primarySchool, name: "小学" },
                  { value: data.juniorHighSchool, name: "初中" },
                  { value: data.technicalSecondary, name: "中专" },
                  { value: data.highSchool, name: "高中" },
                  { value: data.juniorCollege, name: "大专" },
                  { value: data.undergraduate, name: "本科" },
                  { value: data.master, name: "硕士" },
                  { value: data.doctor, name: "博士" },
                  { value: data.others, name: "其他" },
                  { value: data.unfill, name: "未统计" }
                ]
              }
            ],
            legend: {
              x: "0%",
              y: 70,
              orient: "vertical",
              data: ["小学", "初中", "中专", "高中", "大专", "本科", "硕士", "博士", "其他", "未统计"],
              formatter: name => {
                const data = option.series[0].data;
                let total = 0;
                let tarValue = 0;
                for (let i = 0, l = data.length; i < l; i++) {
                  total += parseInt(data[i].value);
                  if (data[i].name === name) {
                    tarValue = parseInt(data[i].value);
                  }
                }
                let p;
                if (total === 0) {
                  p = 0;
                } else {
                  p = ((tarValue / total) * 100).toFixed(2);
                }
                return name + "  " + tarValue + "  " + p + "%";
              }
            }
          };
          educationChart.setOption(option);
          setTimeout(() => {
            window.onresize = () => {
              educationChart.resize();
            };
          }, 200);
        })
        .catch(err => {
          console.log("debug log --> ", err);
        });
    },
    handleDisabled(value) {
      if (value > moment()) return true;
    }
  }
};
</script>

<style scoped lang="scss">
.overview-chart-wrapper {
  display: flex;
  justify-content: space-between;
  margin: 24px 0;
  background-color: #f1f1f1;
  .chart-wrapper {
    width: 49%;
    background-color: #fff;
    padding: 24px;
    border-radius: 4px;
    .contract-chart-wrapper {
      display: flex;
      justify-content: space-between;
    }
    .chart-title {
      font-size: 16px;
      font-weight: 500;
    }
    .bag-6a66f6-radius-2px {
      background: var(--primary);
      border-radius: 2px;
    }
  }
  .chart-basic {
    width: 100%;
    height: 400px;
  }
}
</style>
